<template>
  <view class="register-container">
    <text class="title">用户注册</text>

    <input class="input" v-model="account" placeholder="请输入用户名" />
    <input class="input" v-model="phone" placeholder="请输入手机号" />
    <input class="input" v-model="password" placeholder="请输入密码" password />

    <button class="btn" @click="handleRegister">注册</button>
    <text class="link" @click="goLogin">已有账号？去登录</text>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { register } from '../../utils/userApi.js'

const account = ref('')
const phone = ref('')
const password = ref('')

const handleRegister = async () => {
  if (!account.value || !phone.value || !password.value) {
    uni.showToast({ title: '请填写完整信息', icon: 'none' })
    return
  }
  try {
    const res = await register({
      account: account.value,
      phone: phone.value,
      password: password.value
    })
    uni.showToast({ title: res, icon: 'none' })
    if (res.includes('成功')) {
      setTimeout(() => uni.redirectTo({ url: '/pages/login/login' }), 1000)
    }
  } catch (e) {
    console.error(e)
  }
}

const goLogin = () => {
  uni.navigateTo({ url: '/pages/login/login' })
}
</script>

<style>
.register-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 50rpx;
}

.input {
  width: 80%;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.btn {
  width: 80%;
  background-color: #00aaff;
  color: white;
  padding: 20rpx;
  border-radius: 10rpx;
  text-align: center;
  margin-top: 20rpx;
}

.link {
  margin-top: 40rpx;
  color: #00aaff;
}
</style>
